<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4168484" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon certishare-icon">&#xea3f;</span>
                <div class="name">知识</div>
                <div class="code-name">&amp;#xea3f;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe608;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe60c;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe604;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe603;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe73f;</span>
                <div class="name">卡片形式</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe86f;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe891;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe891;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xeaf7;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xeaf7;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe8b4;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe8b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe602;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe91e;</span>
                <div class="name">Fire</div>
                <div class="code-name">&amp;#xe91e;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe67e;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe657;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe626;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe601;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe882;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe667;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe607;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe600;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe6ad;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe62e;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe7e7;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xeca1;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xeca1;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe69d;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe85c;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe85c;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe8b7;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe8b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe6dd;</span>
                <div class="name">添加好友</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xea10;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xea10;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe726;</span>
                <div class="name">草稿箱</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe6e7;</span>
                <div class="name">reduce</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe835;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe840;</span>
                <div class="name">reduce-btn</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon certishare-icon">&#xe841;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'certishare-icon';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1695892493298') format('woff'),
       url('iconfont.ttf?t=1695892493298') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.certishare-icon {
  font-family: "certishare-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="certishare-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"certishare-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-zhishi"></span>
            <div class="name">
              知识
            </div>
            <div class="code-name">.certishare-icon-zhishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.certishare-icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.certishare-icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.certishare-icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-bangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.certishare-icon-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-qiapianxingshi"></span>
            <div class="name">
              卡片形式
            </div>
            <div class="code-name">.certishare-icon-qiapianxingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-xihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.certishare-icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-pinglun1"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.certishare-icon-pinglun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-lishijilu"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.certishare-icon-lishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-pinglun2"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.certishare-icon-pinglun2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.certishare-icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-Fire"></span>
            <div class="name">
              Fire
            </div>
            <div class="code-name">.certishare-icon-Fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.certishare-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.certishare-icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-index"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.certishare-icon-index
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.certishare-icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.certishare-icon-QQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-QQ1"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.certishare-icon-QQ1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-weixin1"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.certishare-icon-weixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.certishare-icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.certishare-icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-saoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.certishare-icon-saoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.certishare-icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-aixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.certishare-icon-aixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.certishare-icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-aixin1"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.certishare-icon-aixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.certishare-icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-tianjiahaoyou"></span>
            <div class="name">
              添加好友
            </div>
            <div class="code-name">.certishare-icon-tianjiahaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-history"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.certishare-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-caogaoxiang"></span>
            <div class="name">
              草稿箱
            </div>
            <div class="code-name">.certishare-icon-caogaoxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-reduce"></span>
            <div class="name">
              reduce
            </div>
            <div class="code-name">.certishare-icon-reduce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-add1"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.certishare-icon-add1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-reduce-btn"></span>
            <div class="name">
              reduce-btn
            </div>
            <div class="code-name">.certishare-icon-reduce-btn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon certishare-icon certishare-icon-share1"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.certishare-icon-share1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="certishare-icon certishare-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            certishare-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-zhishi"></use>
                </svg>
                <div class="name">知识</div>
                <div class="code-name">#certishare-icon-zhishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#certishare-icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#certishare-icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#certishare-icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-bangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#certishare-icon-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-qiapianxingshi"></use>
                </svg>
                <div class="name">卡片形式</div>
                <div class="code-name">#certishare-icon-qiapianxingshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-xihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#certishare-icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-pinglun1"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#certishare-icon-pinglun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-lishijilu"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#certishare-icon-lishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-pinglun2"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#certishare-icon-pinglun2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#certishare-icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-Fire"></use>
                </svg>
                <div class="name">Fire</div>
                <div class="code-name">#certishare-icon-Fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#certishare-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#certishare-icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-index"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#certishare-icon-index</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#certishare-icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#certishare-icon-QQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-QQ1"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#certishare-icon-QQ1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-weixin1"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#certishare-icon-weixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#certishare-icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#certishare-icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-saoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#certishare-icon-saoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#certishare-icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-aixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#certishare-icon-aixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#certishare-icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-aixin1"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#certishare-icon-aixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#certishare-icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-tianjiahaoyou"></use>
                </svg>
                <div class="name">添加好友</div>
                <div class="code-name">#certishare-icon-tianjiahaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-history"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#certishare-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-caogaoxiang"></use>
                </svg>
                <div class="name">草稿箱</div>
                <div class="code-name">#certishare-icon-caogaoxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-reduce"></use>
                </svg>
                <div class="name">reduce</div>
                <div class="code-name">#certishare-icon-reduce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-add1"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#certishare-icon-add1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-reduce-btn"></use>
                </svg>
                <div class="name">reduce-btn</div>
                <div class="code-name">#certishare-icon-reduce-btn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#certishare-icon-share1"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#certishare-icon-share1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
